<template>
  <MovieTitle :showback="true">猫眼电影</MovieTitle>
  <div class="w-full h-full flex flex-col">
    <!-- 顶部搜索区域 -->
    <div
      class="
        bg-[#f5f5f5]
        h-[50px]
        flex
        justify-between
        border-0 border-b border-solid border-gray-300
      "
    >
      <div
        class="
          border border-solid border-gray-300
          h-[24px]
          mt-[13px]
          w-[330px]
          bg-white
          ml-[10px]
          rounded-[4px]
           relative
        "
      >
        <img
          src="../assets/img/search.svg"
          class="absolute h-[20px] w-[20px] mt-[1px] ml-[4px]"
          alt=""
        />
        <input
          v-model="searchvalue"
          class="h-[23px] border-0 pl-[30px]"
          type="text"
          placeholder="搜电影,搜影院"
        />
      </div>
      <div class="text-[#f03d37] mr-[8px] mt-1" style="line-height: 50px">
        取消
      </div>
    </div>
    <!-- 电影展示位置 -->
    <div class="content-box flex-1 overflow-auto">
      <div
        class="h-[110px] flex p-[5px]"
        v-for="item in searchMovieList"
        :key="item.id"
      >
        <!-- 图片 -->
        <div class="w-[80px] h-full">
          <img
            class="w-full h-full"
            :src="baseURL + item.movie_pc"
            alt=""
            @click="ImagePreview([baseURL + item.movie_pc])"
          />
        </div>
        <!-- 电影信息 -->
        <div
          class="
            flex-1
            text-[12px] text-gray-600
            flex flex-colvue
            justify-between
            ml-2
            overflow-auto
          "
          @click="toMovieDetail(item.id)"
        >
          <div class="text-[16px] font-bold text-black">
            {{ item.movie_name }}
          </div>
          <div>
            评分<span class="text-warningColor font-bold text-[14px]">
              {{ item.movie_score }}
            </span>
          </div>
          <div class="truncate">主演:{{ item.role }}</div>
          <div>{{ item.publicTime }}上映</div>
        </div>
        <!-- 购票,预售按钮 -->
        <div class="border w-[70px] flex items-center justify-center">
          <button
            type="button"
            class="btn-buy"
            v-if="item.publicTime < new Date().toLocaleDateString()"
          >
            购票
          </button>
          <button type="button" class="btn-presale" v-else>预售</button>
        </div>
      </div>
      <div class=" text-center text-gray-400 mt-5" v-if="searchMovieList==''">未找到相关电影信息！</div>
    </div>
  </div>
</template>

<script setup>
import { ImagePreview } from "vant";
import MovieTitle from "../components/title-bar.vue";
import { ref, reactive, watch } from "vue";
import API from "../utils/API/index.js";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
let baseURL = ref("http://www.softeem.xin:9999");
const allMovieList = ref([]);
//用于保存搜索符合条件的电影信息
const searchMovieList = ref([]);
//搜索框内的值
const searchvalue = ref(null);
let a=ref(false)
watch(
  searchvalue,
  (newValue, oldValue) => {
    API.movieInfo.getAllList().then((res) => {
      allMovieList.value = res;
    });
    if (newValue) {
      searchMovieList.value = allMovieList.value.filter((item) => {
        //   console.log(item.movie_name);
        return item.movie_name.indexOf(newValue) !== -1;
      });  
    } else {
      searchMovieList.value = null;
    }
  },
  //immediate属性用来表示 将立即以表达式的当前值触发回调
  { immediate: true }
);
//进入电影详细信息页面
const toMovieDetail = (id) => {
  // console.log(id);
  //push进入一个新的页面
  router.push({
    name: "movieDetail",
    query: {
      id: id,
    },
  });
};
</script>

<style lang="scss" scoped>
.btn-buy {
  @apply w-[50px]
          h-[25px]
          text-[12px]
          bg-primaryColor
          border-none
          rounded-[15px]
          text-white;
}
.btn-presale {
  @extend .btn-buy;
  @apply bg-secondColor;
}
</style>